<template>
  <div class="chat-dialog">
    <input type="file" @change="handleFileUpload" accept="image/*" />
    <div class="messages">
      <div v-for="(message, index) in messages" :key="index" class="message">
        <div v-if="message.type === 'text'">{{ message.content }}</div>
        <div v-else-if="message.type === 'image'">
          <img :src="message.content" alt="Uploaded Image" />
        </div>
      </div>
    </div>
    <input v-model="newMessage" @keyup.enter="sendMessage" placeholder="Type a message..." />
    <button @click="sendMessage">Send</button>
  </div>
</template>

<script lang="ts" setup name="">

import { ref } from 'vue';

    const messages = ref([] as any);
    const newMessage = ref('');

    const handleFileUpload = (event) => {
      const file = event.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        messages.value.push({ type: 'image', content: (e!.target as FileReader)!.result });
      };

      reader.readAsDataURL(file);
    };

    const sendMessage = () => {
      if (newMessage.value.trim()) {
        messages.value.push({ type: 'text', content: newMessage.value });
        newMessage.value = '';
      } else {
        alert('Please enter a message or select a photo to send.');
      }
    };



</script>

<style>
.chat-dialog {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 300px;
  height: 500px;
  border: 1px solid #ccc;
  padding: 10px;
}

.messages {
  flex: 1;
  overflow-y: auto;
  margin-bottom: 10px;
}

.message {
  margin-bottom: 10px;
}

.message img {
  max-width: 100%;
  height: auto;
}

input[type='file'],
input[type='text'],
button {
  margin-top: 5px;
}
</style>
